import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
import styled from '@emotion/styled'

const picData = [
    'https://images.pexels.com/photos/12017866/pexels-photo-12017866.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load',
    'https://images.pexels.com/photos/12315780/pexels-photo-12315780.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load',
    'https://images.pexels.com/photos/11577525/pexels-photo-11577525.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
    'https://images.pexels.com/photos/10406844/pexels-photo-10406844.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
    'https://images.pexels.com/photos/12142950/pexels-photo-12142950.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load',
    'https://images.pexels.com/photos/12089012/pexels-photo-12089012.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load'
]

const FlipPage = () => {
    
    const [dataList, setDataList] = useState<any[]>([picData[0]])
    const wrapperRef = useRef<HTMLDivElement>(null)
    const lastRectRef = useRef<Map<HTMLElement, DOMRect>>(new Map())

    const random = (min:number, max:number) => {
        return Math.floor(Math.random() * (max - min + 1) + min)
    }
    const shuffle = (arr:any[]) => {
        let ret = arr.slice()
        for(let i=0;i<ret.length; i++){
            let j = random(0, i)
            let t = ret[i]
            ret[i] = ret[j]
            ret[j] = t
        }
        return ret
    }

    const add = () => {
        let newPic = picData[random(0, picData.length-1)] + '&sign=' + Math.random().toString(16).substring(2, 8)
        setDataList(prev => [newPic, ...prev])
    }
    const handleShuffle = () => {
        setDataList(shuffle)
    }

    const getElementNodeRect = (wrapper:HTMLElement|null) => {
        if(!wrapper) return new Map()
        let result = Array.from(wrapper.childNodes) as HTMLElement[]
        return new Map(result.map(v => [v, v.getBoundingClientRect()]))
    }

    useLayoutEffect(()=>{
        let currentRectMap = getElementNodeRect(wrapperRef.current)
        lastRectRef.current.forEach((prevPos, node) => {
            let currentRect = currentRectMap.get(node)

            const invert = {
                left: prevPos.left - currentRect?.left,
                top: prevPos.top - currentRect?.top
            }

            const keyframes = [
                {
                    transform: `translate(${invert.left}px, ${invert.top}px)`
                },
                { transform: 'translate(0, 0)' }
            ]

            const options = {
                duration: 800,
                easing: 'cubic-bezier(0, 0, 0.32, 1)'
            }

            node.animate(keyframes, options)
        })
    }, [dataList])

    useEffect(()=>{
        let r = getElementNodeRect(wrapperRef.current)
        lastRectRef.current = r
    }, [dataList])

    
    return (
        <Wrap>
            <div>
                <button onClick={add}>添加图片</button>
                <button onClick={handleShuffle}>乱序</button>
            </div>
            <div className="box" ref={wrapperRef}>
                {
                    dataList.map((v, i)=> <img className="item" src={v} key={v} alt="" />)
                }
            </div>
        </Wrap>
    )
}

const Wrap = styled.div`
    /* display: flex;
    flex-direction: column; */
    .box{
        display: flex;
        flex-wrap: wrap;
        margin-top: 20px;
        .item{
            width: 25%;
            height: 250px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #eee;
            border: 1px solid #fff;
            box-sizing: border-box;
        }
    }
    
`


export default FlipPage